<template>
	<view class="template-photo">

		<!-- 顶部自定义导航 -->
		<!-- 		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class="tn-custom-nav-bar__back" @click="goBack">
				<text class="icon tn-icon-left"></text>
				<text class="icon tn-icon-home-capsule-fill"></text>

			</view>
		</tn-nav-bar> -->
		<view class="navbar">
			<uv-notice-bar text="长按图片保存,点击文字复制"></uv-notice-bar>
		</view>
		<!-- 页面内容 -->
		<view class="slideshow" @click="clk" v-longpress:1000="handleLongPress">
			<uv-image width="750rpx" height="100%" :src="shareObj.image" />
		</view>
		<tn-read-more ref="readMore">
			<view class="rich-text-bottom" @click="clkCopa">
				<rich-text :nodes="shareObj.description"></rich-text>
			</view>
		</tn-read-more>
	</view>
</template>

<script>
	import template_page_mixin from "@/libs/mixin/template_page_mixin.js";
	import { longpress } from '@/common/utils.js'
	export default {
		name: "TemplatePhoto",
		mixins: [template_page_mixin],
		directives: {
			longpress
		},
		data() {
			return {
				shareObj: {},
			};
		},


		created() {
			this.getShare()
		},

		onReady() {
			this.$nextTick(() => {
				this.$refs.readMore.init();
			});
		},


		methods: {

			// 获取数据
			getShare() {
				let that = this
				uni.request({
					url: 'https://open.web.jinrijiesuan.cn/snm/share',
					success(res) {

						that.$data.shareObj = res.data.data
					}
				})
			},


			handleLongPress(e) {
				console.log('长按触发', e);
				this.saveImg()
			},
			saveImg() {
				// 使用示例
				uni.downloadFile({
					url: this.shareObj.image,
					success: (downloadRes) => {
						console.log('H5 下载成功：', downloadRes);

						// 创建链接下载（H5 环境）
						const link = document.createElement('a');
						link.href = downloadRes.tempFilePath;
						link.download = 'image.jpg';
						document.body.appendChild(link);
						link.click();
						document.body.removeChild(link);
					},
					fail: (err) => {
						console.log('H5 下载失败：', err);
						// H5 环境下的备选方案：直接打开图片链接
						window.open(this.shareObj.image, '_blank');
					}
				});


			},

			clk() {
				console.log('长按');
			},

			clkCopa() {
				// let that = this
				uni.setClipboardData({
					data: this.$data.shareObj.description, // 你想保存的文本内容
					success: _ => {
						uni.showToast({
							title: '已保存到剪贴板',
							icon: 'success',
							duration: 2000
						});
					}
				});
			}
		},
	};
</script>

<style lang="scss" scoped>
	.template-photo {
		margin: 0;
		width: 100%;
		height: 100vh;
		color: #fff;
		overflow: hidden;
	}



	/* 相册 start*/
	.slideshow {
		width: 100vw;
		height: 100vh;
	}

	.navbar {
		z-index: 100;
		position: absolute;
		top: 0;
		width: 100%;
		// background-color: rgba(0, 0, 0, 0);
	}

	::v-deep .uv-notice-bar {
		background-color: rgba(0, 0, 0, 0.2) !important;
	}



	/* 新增样式让 rich-text 显示在底部 */
	.rich-text-bottom {
		color: #ffffff;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 15px;
		background-color: rgba(0, 0, 0, 0.5);
		/* 可根据需求修改背景颜色和透明度 */
		z-index: 4;

		/* 确保显示在图片上方 */
	}
</style>